<template>
	<view class="content">
		<!-- #ifndef APP-NVUE || MP-TOUTIAO -->
		<view class="u-demo-block">
			<u-swiper :list="banner" indicator indicatorMode="line" circular :autoplay="false" radius="5"
				bgColor="#ffffff"></u-swiper>
		</view>
		<!-- #endif -->
		<view class="detail">
			<view class="title">{{detail.title}}</view>
			<view class="shouc" @tap="shouc">
				<view v-if="issc==0">
					<u-icon name="heart" size="44rpx" color="#23BF61"></u-icon>
				</view>
				<view v-if="issc==1">
					<u-icon name="heart-fill" size="44rpx" color="#23BF61"></u-icon>
				</view>
			</view>
			<view class="info">
				<u--text prefixIcon="clock" iconStyle="font-size: 14px" size="14px" color="#666"
					text="营业时间：00:00-24:00"></u--text>
			</view>
			<view class="info">
				<u--text prefixIcon="map" iconStyle="font-size: 16px" size="14px" color="#666" :text="address"></u--text>
			</view>
			<view class="gotomap" @click="toMapAPP"><u-icon name="map-fill" color="#23BF61" size="20"></u-icon>
				<text>导航</text>
			</view>
		</view>
		<view class="select">
			<view class="title">选择插座</view>
			<view class="list">
				<view class="item" v-for="(item,index) in detail.czarr">
					<view v-if="item.stutas==true">
						<navigator @tap="gotoact(id,item.name)" class="iteminfo">
							<view class="txt">{{item.name}}</view>
							<view class="num">空闲</view>
						</navigator>
					</view>
					<view v-else>
						<view class="iteminfo selects">
							<view class="txt">{{item.name}}</view>
							<view class="num">占用</view>
						</view>
					</view>
				</view>
				<div class="clear"></div>
			</view>
		</view>
		<com-map ref="commap" :address="address"></com-map>
		<com-tabbar :currentTab="currentTab"></com-tabbar>
		<!-- 登陆组件 -->
		<com-login ref="login"></com-login>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	let that
	export default {
		data() {
			return {
				id: '',
				address: '',
				banner: [],
				list: [],//插座列表
				currentTab: "",
				detail: [],
				issc: 0, //是否收藏
			}
		},
		onLoad(e) {
			this.id = e.id
		},
		onShow() {
			this.getdetail()
		},
		mounted() {
			that = this
		},
		computed: {
			//引入store全局变量
			...mapState(['loginState', 'userInfo', 'mylocation'])
		},
		methods: {
			//获取电站详情
			getdetail() {
				this.$http_api.dpcdetail({
					uid: this.userInfo.id,
					id: this.id
				}).then((res) => {
					that.banner = res.images
					that.issc = res.issc
					that.detail = res
					that.address = res.address
				})
			},
			//收藏
			shouc() {
				if (!this.loginState) {
					this.$refs.login.openLogin()
					return
				}
				this.$http_api.dpcsc({
					uid: this.userInfo.id,
					id: this.id
				}).then((res) => {
					that.issc = res
				})
			},
			//选择插座
			gotoact(id, num) {
				if (!this.loginState) {
					// 调用子组件方法
					this.$refs.login.openLogin()
					return
				}
				uni.navigateTo({
					url: '/pages/detail/act-electromobile?id=' + id + '&num=' + num
				})
			},
			//跳转第三方地图
			toMapAPP(){
				//调用子组件方法
				this.$refs.commap.toMapAPP()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		padding: 0 3%;
		box-sizing: border-box;
	}

	.u-demo-block {
		width: 100%;
		padding-top: 40rpx;
	}

	.detail {
		position: relative;

		.gotomap {
			position: absolute;
			right: 20rpx;
			bottom: 0;
			display: flex;
			font-size: 28rpx;
			color: #333;

			text {
				margin-left: 3px;
			}
		}

		.shouc {
			position: absolute;
			top: 2px;
			right: 0;
		}

		.title {
			font-size: 36rpx;
			font-weight: bold;
			margin: 40rpx 0 20rpx;
		}

		.info {
			margin-bottom: 10rpx;
		}
	}

	.select {
		margin-top: 100rpx;

		.title {
			width: 78px;
			font-size: 38rpx;
			font-weight: bold;
			text-align: center;
			margin-bottom: 50rpx;
			padding-bottom: 10rpx;
			border-bottom: 2px solid #23BF61;
		}

		.list {
			margin-top: 20prx;

			.item .iteminfo {
				width: 17%;
				margin-right: 3%;
				border: 1px solid #23BF61;
				float: left;
				padding: 30rpx 0;
				text-align: center;
				color: #23BF61;
				margin-bottom: 40rpx;
				border-radius: 10rpx;

				.txt {
					font-size: 50rpx;
					font-weight: bold;
				}
			}

			.item .iteminfo.selects {
				border: 1px solid rgba(241, 0, 0, 0.4);
				background: rgba(241, 0, 0, 0.4);

				.txt {
					color: #f10000;
				}

				.num {
					color: #f10000;
				}
			}

			.item:nth-child(5n) .iteminfo {
				margin-right: 0;
			}
		}
	}
</style>